<!-- 项目任务计划 -->
<template>
  <ContainerLayout class="resource-management">
    <div class="form-container">
      <div style="flex: 1; display: flex">
        <el-form ref="formRef" :inline="true" :model="queryForm" class="query-form" label-width="40px">
          <el-form-item label="项目">
            <el-select v-model="projectValue" placeholder="请选择项目" style="width: 180px" clearable>
              <el-option v-for="item in projectList" :key="item.code" :label="`${item.code}-${item.cname}`" :value="item.id" />
            </el-select>
          </el-form-item>

          <TimeSlotDatePicker label="时段" v-model="queryForm.date" />

          <el-form-item>
            <el-button type="primary" @click="handleClickBtnSubmit" :icon="Search">查询</el-button>
            <el-button @click="handleClickBtnReset" :icon="Refresh">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <template v-if="false">
        <el-button :type="!isMultiple ? 'default' : 'primary'" @click="handleClickChkMultiple" :icon="!isMultiple ? CircleCheck : CircleCheckFilled">多单元格操作</el-button>
        <el-button :type="!isMultiple ? 'info' : 'primary'" :icon="EditPen" :disabled="!isMultiple" @click="handleClickBtnEditMultiple">批量编辑计划</el-button>
        <el-button :type="!isMultiple ? 'info' : 'primary'" :icon="EditPen" :disabled="!isMultiple" @click="handleClickBtnEditMultiple">批量编辑实际</el-button>
      </template>
    </div>
    <div class="table-container" ref="tableContainer">
      <el-scrollbar :height="scrollbarHeight" always>
        <el-space direction="vertical" :fill="true" :size="20" style="width: 100%">
          <div v-for="tableItem in tableList" class="table-cells">
            <div class="table-title">
              {{ tableItem.tableTitle }}
              <el-button v-if="isQueryed" plain size="small" @click="handleClickBtnOpenEditRemark" :icon="Edit">编辑项目说明</el-button>
              <el-button v-if="isQueryed" plain size="small" @click="handleClickBtnOpenEditParticipant" :icon="Edit">编辑项目人员</el-button>
            </div>
            <div class="table-wrap" ref="tableWrap">
              <el-table ref="dataTable" :data="tableItem.tableData" :height="tableItem.height" :style="dataTableStyle" border scrollbar-always-on :summary-method="getSummaries" header-cell-class-name="table-header-row" empty-text="没有数据">
                <el-table-column label="工序" width="150" fixed>
                  <template #default="scope">
                    <div>{{ scope.row.processName }}</div>
                  </template>
                </el-table-column>
                <el-table-column v-for="(item, index) in tableColumnDate" :prop="item.label" :key="index" width="70" resizable>
                  <template #header>
                    <div class="table-header-cell">
                      <div>{{ item.label }}</div>
                    </div>
                  </template>
                  <template #default="scope">
                    <el-tag v-if="!isMultiple" :type="scope.row[item.columnName] == 0 ? 'danger' : 'info'" class="table-cell" @click="handleClickTableCol(scope.row, tableItem.project, item.columnName)">{{ scope.row[item.columnName + '|weekPlanNum'] }}/{{ scope.row[item.columnName + '|weekFinishNum'] }} </el-tag>
                    <div v-else :class="{ 'table-cell-checked': scope.row[item.columnName + '|checked'] }">
                      <el-tag :type="scope.row[item.columnName] == 0 ? 'danger' : 'info'" class="table-cell" @click="handleClickTableCol(scope.row, tableItem.project, item.columnName)">{{ scope.row[item.columnName] }}</el-tag>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column></el-table-column>
              </el-table>
            </div>
          </div>
        </el-space>
      </el-scrollbar>
    </div>
  </ContainerLayout>
  <DrawerEditProjectRemark ref="drawerEditProjectRemark" @closeDrawer="handlerDialogUpdateSubmited" />
  <DialogProjectTaskPlan ref="dialogProjectTaskPlanRef" @submited="handlerDialogUpdateSubmited" />
  <DialogProjectEditParticipant ref="dialogProjectEditParticipantRef" @submited="handlerDialogUpdateSubmited" />
  <DialogUpdateHeadcountByProjectMultiple ref="dialogUpdateHeadcountByProjectMultipleRef" @submited="handlerDialogUpdateSubmited" />
</template>
<script lang="ts" setup>
import ContainerLayout from '../layout/ContainerLayout.vue'
import DialogProjectTaskPlan from '../components/dialog/DialogProjectTaskPlan.vue'
import DialogProjectEditParticipant from '../components/dialog/DialogProjectEditParticipant.vue'
import DrawerEditProjectRemark from '../components/drawer/DrawerEditProjectRemark.vue'
import DialogUpdateHeadcountByProjectMultiple from '../components/dialog/DialogUpdateHeadcountByProjectMultiple.vue'
import { reactive, ref, onMounted, h, nextTick } from 'vue'
import { useProjectssStore } from '../stores'
// import IProjectTypes from '../interface/IProjectTypes'
import { Refresh, Search, CircleCheck, CircleCheckFilled, EditPen, Edit } from '@element-plus/icons-vue'
import * as utils from '../utils'
import TimeSlotDatePicker from '../layout/FormTableLayout/TimeSlotDatePicker.vue'
import Api from '../api'
import { ElMessage } from 'element-plus'

const showFlag = ref<boolean>(false)
const deptCountMap = ref<any>({})
const tableWrap = ref<HTMLElement | null>(null)
// 弹窗
const drawerEditProjectRemark = ref<InstanceType<typeof DrawerEditProjectRemark>>()
const dialogProjectTaskPlanRef = ref<InstanceType<typeof DialogProjectTaskPlan>>()
const dialogProjectEditParticipantRef = ref<InstanceType<typeof DialogProjectEditParticipant>>()
const dialogUpdateHeadcountByProjectMultipleRef = ref<InstanceType<typeof DialogUpdateHeadcountByProjectMultiple>>()

const projectssStore = useProjectssStore()
// const deptStore = useDeptStore()
// const deptList = ref(deptStore.getAllState())
// const deptProps = ref({ multiple: true, label: 'deptName', value: 'deptId' })
// const projectTypes = ref<IProjectTypes[]>(useTaskTypeStore().getAllState())
// 多选
// const checkAllProject = ref(false)
// const indeterminateProject = ref(false)
const projectValue = ref<any>(null)
// 项目列表
const projectList = ref<Array<{ id: number; code: string; cname: string }>>(projectssStore.getAllState() as any)
// 表格是否查询过
const isQueryed = ref(false)
const projectTitle = ref<string>('')
const tableColumnDate = ref<any[]>([])
const dataTableStyle = ref({})
// 表格列表
const tableList = ref<{ tableTitle: string; project: any; tableData: any[]; height: any }[]>([])
// 表格数据
const tableRows = ref<any[]>([])
const tableContainer = ref(ref<HTMLElement | null>(null))
const scrollbarHeight = ref(400)
const weeks = ref()
// 表单
const queryForm = reactive({
  user: '',
  projectId: '',
  date: [] as Date[],
  deptIds: [] as string[] | number[],
})
// 是多选模式
const isMultiple = ref(false)

/**
 * 点击表格列时触发的函数
 *
 * @param row 行数据
 * @param project 项目数据
 */
const handleClickTableCol = (row: any, project: any, columnName: any) => {
  if (isMultiple.value) {
    // 多单元格编辑模式
    if (row[columnName] != 0) {
      row[columnName + '|checked'] = !row[columnName + '|checked']
    }
    // checkedColumns.value.push(`${row.deptId} - ${columnName}`)
    // console.log(checkedColumns.value)
    // resultItem[key + '|checked'] = false
  } else {
    // 点击单元格
    const { processId, processName } = row
    const { id, code, cname } = project

    const weekStartDate = new Date(columnName.split(' - ')[0])
    const weekEndDate = new Date(columnName.split(' - ')[1])
    // let weekEndDate = utils.formatDate(queryForm.date[1], 'yyyy-MM-dd')
    // if (row[columnName + '|flag']) {
    //   weekEndDate = utils.formatDate(new Date(columnName.split(' - ')[1]))
    // }
    // console.log('processId, processName', processId, processName)
    // console.log('id, name, cname', id, name, cname)
    // console.log('weekStartDate', weekStartDate)
    // console.log('project', project)
    const weekPlanNumVal = row[columnName + '|weekPlanNum']
    const weekFinishNumVal = row[columnName + '|weekFinishNum']

    dialogProjectTaskPlanRef.value?.openDialog({
      weekStartDate,
      weekEndDate,
      processId,
      processName,
      projectId: id,
      projectCode: code,
      projectName: cname,
      userNum: row[columnName],
      weekPlanNum: weekPlanNumVal == 'N' ? null : weekPlanNumVal,
      weekFinishNum: weekFinishNumVal == 'N' ? null : weekFinishNumVal,
      weekPlanRemark: row[columnName + '|weekPlanRemark'],
      weekFinishRemark: row[columnName + '|weekFinishRemark'],
      weekRemark: row[columnName + '|weekRemark'],
      monthRemark: row[columnName + '|monthRemark'],
      monthPlanRemark: row[columnName + '|monthPlanRemark'],
      flag: row[columnName + '|flag'],
      colId: row[columnName + '|id'],
    })
  }
}

const handlerDialogUpdateSubmited = async () => {
  await handleClickBtnSubmit()
  isMultiple.value = false
}
/**
 * 提交表单处理函数
 *
 * @returns {Promise<void>} 返回一个异步操作的Promise对象，无返回值
 */
const handleClickBtnSubmit = async () => {
  // console.log('queryForm', queryForm)
  isQueryed.value = true
  showFlag.value = true
  projectTitle.value = ''

  if (queryForm.date.length == 2) {
    const [start, end] = queryForm.date
    weeks.value = utils.getWeeksBetweenDates(start, end)
    await setTableColumn()
    await getDeptList()
    tableList.value = []
    nextTick(async () => {
      await buildDataTable()
    })
  }
}

/**
 * 异步构建数据表格。
 *
 * @returns 无返回值。
 */
const buildDataTable = async () => {
  // 表结构
  const tableData = await mergeData(tableRows.value, tableColumnDate.value)
  const start = weeks.value[0].start
  const end = weeks.value[weeks.value.length - 1].end
  // 实际任务
  const { rows } = await Api.InformationRequirement.getList({
    projectId: projectValue.value,
    weekStartDate: utils.formatDate(start),
    weekEndDate: utils.formatDate(end),
  })
  // 获取选中的项目列表项目列表
  const items: any[] = []
  if (projectValue.value != null) {
    items[0] = projectList.value.find((e: any) => e.id == projectValue.value)
  }

  if (items.length > 0) {
    tableList.value = items.map((item: any) => {
      // console.log('item', item.id)
      // const rows = rowsResult.filter((e: any) => e.projectId == item.id)
      const newData = mergeLists(tableData, rows)
      // console.log('rows 224', rows.filter((e: any) => e.deptId == 224))
      let height = 800

      // newData.map(async (e: any) => {
      //   e.deptUserLength = deptCountMap.value[e.deptId]
      //   e.checked = false
      // })

      return {
        tableTitle: `${item.code}-${item.cname}`,
        height,
        project: { ...item },
        tableData: newData,
      }
    })
  }
}

/**
 * 合并两个列表
 *
 * @param list1 第一个列表
 * @param list2 第二个列表
 * @returns 合并后的列表
 */
const mergeLists = (list1: any, list2: any) => {
  return list1.map((item1: any) => {
    const matchingItems = list2.filter((item2: any) => item2.processId === item1.processId)
    const resultItem = { ...item1 }
    matchingItems.forEach((item2: any) => {
      const key = `${item2.weekStartDate} - ${item2.weekEndDate}`
      resultItem[key + '|weekPlanNum'] = item2.weekPlanNum === null ? 'N' : item2.weekPlanNum
      resultItem[key + '|weekFinishNum'] = item2.weekFinishNum === null ? 'N' : item2.weekFinishNum
      resultItem[key + '|weekPlanRemark'] = item2.weekPlanRemark === null ? 'N' : item2.weekPlanRemark
      resultItem[key + '|weekFinishRemark'] = item2.weekFinishRemark === null ? 'N' : item2.weekFinishRemark
      resultItem[key + '|weekRemark'] = item2.weekRemark === null ? '' : item2.weekRemark
      resultItem[key + '|monthRemark'] = item2.monthRemark === null ? '' : item2.monthRemark
      resultItem[key + '|monthPlanRemark'] = item2.monthPlanRemark === null ? '' : item2.monthPlanRemark
      resultItem[item2.weekStartDate] = item2.weekPlanNum
      resultItem[item2.weekEndDate] = item2.weekPlanNum
      resultItem[key + '|flag'] = item2.weekPlanNum >= 0 ? true : false
      resultItem[key + '|id'] = item2.id
      resultItem[key + '|checked'] = false
    })
    return resultItem
  })
}

/**
 * 计算表格数据中的汇总信息
 *
 * @param param 包含表格列信息和数据的对象
 * @returns 返回汇总信息的数组，每个元素可能是字符串或VNode，表示该列的汇总结果
 */
const getSummaries = (param: any) => {
  const { columns, data } = param
  const sums: any[] = []
  columns.forEach((column: any, index: number) => {
    if (index === 0) {
      sums[index] = h('div', { class: 'total-headcount', style: 'width:270px;' }, ['Total Headcount'])
      return
    }
    const values = data.map((item: any) => Number(item[column.property]))
    // sums[index] = '0'
    if (!values.every((value: any) => Number.isNaN(value))) {
      sums[index] = values.reduce((prev: any, curr: any) => {
        const value = Number(curr)
        if (!Number.isNaN(value)) {
          return prev + curr
        } else {
          return prev
        }
      }, 0)
    } else {
      // console.log(index)
      sums[index] = ''
    }
  })
  sums[1] = ''
  return sums
}

/**
 * 合并数据函数
 *
 * @param a 第一个数据集合，包含多个部门对象
 * @param b 第二个数据集合，包含多个时间区间对象
 * @returns 合并后的数据集合，包含合并后的部门对象数组
 */
const mergeData = (a: any, b: any) => {
  // console.log('b', b)
  // console.log('tableColumnDate.value', tableColumnDate.value)
  const result: any[] = []
  // 遍历集合a中的每个部门对象
  a.forEach((department: any) => {
    const mergedObj = { ...department }
    // 遍历集合b中的每个时间区间对象
    b.forEach((timeRange: any) => {
      const { columnName, start, end } = timeRange
      // 将时间区间相关的属性添加到合并后的对象中，并初始化为0
      mergedObj[columnName + '|weekPlanNum'] = 'N'
      mergedObj[columnName + '|weekFinishNum'] = 'N'
      mergedObj[start] = 0
      mergedObj[end] = 0
    })
    result.push(mergedObj)
  })
  return result
}
/**
 * 点击按钮重置表单
 *
 * 异步调用 resetForm 函数重置表单
 */
const handleClickBtnReset = async () => {
  await resetForm()
}

/**
 * 重置表单
 *
 * 重置查询表单的所有字段到初始状态，包括用户、项目ID、日期范围、部门ID数组和时间日志类别
 */
const resetForm = () => {
  isQueryed.value = false
  projectTitle.value = ''
  const [start, end] = utils.getDateRangeByDate(utils.shortcutsType.本月) as Date[]
  queryForm.user = ''
  queryForm.projectId = ''
  queryForm.date = [start, end]
  queryForm.deptIds = [] as string[] | number[]
  projectValue.value = null
  handleClickBtnSubmit()
}

/**
 * 获取工序列表
 *
 * @returns 返回处理后的部门列表
 */
const getDeptList = async () => {
  // To do: 获取部门列表
  if (projectValue.value) {
    const { rows } = await Api.Projects.getProcess(projectValue.value)
    tableRows.value = rows
  }
}
/**
 * 设置表格列
 *
 * @returns 无返回值
 */
const setTableColumn = async () => {
  // 设置 table 列
  tableColumnDate.value = []
  await new Promise((resolve) =>
    setTimeout(() => {
      console.log('weeks', weeks.value)
      tableColumnDate.value = [
        ...weeks.value.map((e: any) => {
          const start = utils.formatDate(e.start, 'yyyy-MM-dd')
          // console.log('start', start)
          const end = utils.formatDate(e.end, 'yyyy-MM-dd')
          const startYear = utils.formatDate(e.start, 'yyyy')
          const endYear = utils.formatDate(e.end, 'yyyy')
          const startDay = utils.formatDate(e.start, 'MM-dd')
          const endDay = utils.formatDate(e.end, 'MM-dd')
          return { label: start, columnName: `${start} - ${end}`, start, end, startDay, endDay, startYear, endYear }
        }),
      ]
      resolve(true)
    }, 0)
  )
}
/**
 * 处理点击切换是否允许多选状态的方法
 *
 * @returns 无返回值
 */
const handleClickChkMultiple = () => {
  tableList.value.map((el) => {
    el.tableData.map((e: any) => {
      tableColumnDate.value.map((item: any) => {
        e[item.columnName + '|checked'] = false
      })
    })
  })
  isMultiple.value = !isMultiple.value
}

// 批量编辑
const handleClickBtnEditMultiple = () => {
  // row[columnName + '|id']
  const editColumns: any[] = []

  tableList.value.map((el) => {
    el.tableData.map((e: any) => {
      tableColumnDate.value.map((item: any) => {
        if (e[item.columnName + '|checked']) {
          editColumns.push({
            id: e[item.columnName + '|id'],
            projectName: el.tableTitle,
            columnName: item.columnName,
            parentDeptName: e.parentDeptName,
            deptName: e.deptName,
          })
        }
      })
    })
  })
  if (editColumns.length == 0) {
    ElMessage.warning('请选择要编辑的单元格！')
  }
  dialogUpdateHeadcountByProjectMultipleRef.value?.openDialog(editColumns)
}

/**
 * 处理点击按钮打开编辑备注的异步函数
 */
const handleClickBtnOpenEditRemark = async () => {
  const row: any = projectssStore.getAllState().find((e: any) => e.id === projectValue.value)
  if (row) {
    drawerEditProjectRemark.value!.openDrawer(row.id, row.cname, row.remark)
  }
}
const handleClickBtnOpenEditParticipant = async () => {
  const row: any = projectssStore.getAllState().find((e: any) => e.id === projectValue.value)
  if (row) {
    row.preproductionProgress = row.preproductionProgress * 1
    row.productionProgress = row.productionProgress * 1
    row.postProductionProgress = row.postProductionProgress * 1

    dialogProjectEditParticipantRef.value!.openDialog(row)
  }
}

onMounted(() => {
  // 初始化表格列数据
  // setTableColumn()
})

onMounted(async () => {
  deptCountMap.value = await Api.Dept.getDeptUserCountMap()
  isQueryed.value = false
  projectTitle.value = ''
  const [start, end] = utils.getDateRangeByDate(utils.shortcutsType.本月) as Date[]
  queryForm.user = ''
  queryForm.projectId = ''
  queryForm.date = [start, end]
  queryForm.deptIds = [] as string[] | number[]
  projectValue.value = null
  // console.log('projectList', queryForm.date)
  if (tableContainer.value) {
    scrollbarHeight.value = tableContainer.value.offsetHeight
    dataTableStyle.value = { width: tableContainer.value.offsetWidth + 'px' }
  }
  // dataTableStyle
})
</script>
<style lang="scss" scoped>
.resource-management {
  display: flex;
  flex-direction: column;
  .form-container {
    display: flex;
    justify-content: flex-start;
  }
  .table-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    .table-wrap {
      flex: 1;
      width: 100%;
      overflow: hidden;
    }
  }
  .table-header-cell {
    writing-mode: vertical-lr;
    // line-height: 1;
  }
  .table-cell {
    cursor: pointer;
    width: 100%;
  }
  .table-cells {
    width: 100%;
    overflow: hidden;
  }
  .table-cell-checked {
    position: relative;
    &::after {
      content: '';
      display: block;
      position: absolute;
      z-index: 99;
      width: 10px;
      height: 10px;
      background-color: aquamarine;
      bottom: 0;
      left: 0;
    }
  }
}
</style>
